<template>
  <div>
    <div id="content" style="height: 400px;"
        v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    </div>
  </div>
</template>

<script>
import { mapActions,mapState } from 'vuex';
export default {
  mounted(){
      this.initEchart();
  }, 
  computed:{
      ...mapState('dataList',['dataList'])
  },
  data() {
      return {
          id:0,
          loading:true,
      }
  },
  destroyed() {
      clearInterval(this.id);
  },
  created(){
      this.id = setInterval(()=>{
          this.findData()
      },5000)
  },
  methods: {
      ...mapActions('dataList',['page_query']),

      findData(){
        this.page_query({page:1,pageSize:10}).then(()=>{
            let res1 = this.dataList.list.map((item)=>{
                return item.province;
            })
            let res2 = this.dataList.list.map((item)=>{
                return item.dead;
            })
            this.initEchart(res1,res2);
        });
      },
    // 初始化图表
    initEchart(res1,res2) {
    //  销毁图表
     echarts.init(document.getElementById('content')).dispose();
     var myChart = echarts.init(document.getElementById('content'));
            // 指定图表的配置项和数据
            var option = {
                xAxis: {
                    type: 'category',
                    data: res1,
                    axisLabel:{
                        formatter(val){
                            return val.split('').join('\n');
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: res2,
                    type: 'line'
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
    },
  },
};
</script>
